For this lecture, we're going to take a trip back to image labels and learn more about the slice scale
type.
I'm going to discuss with you something called nine slice design, which basically means that we slice
an image into nine different zones.
And these nine zones have their own aspect ratios, which allows us to scale an image across multiple
different screen types and resolutions without distorting the image.
As an example, with this image on the default stretch mode, if I were to resize my screen, for example,
on the y axis, you will notice that these sections of my images, such as this recording section or
this battery button here, are becoming distorted.
They're being squished down on the y axis.
Same thing goes with the x axis.
If I were to move it this way, you're going to notice them squish along the x axis.
Sometimes this isn't desired.
Wouldn't it be better if we could have the corners of our image, have a different aspect ratios from
the edges between them?
Well, this is what nine slice design allows us to do.
If we were to go and set the scale type to slice, we're going to notice is that the image right here
is going to get put down in the bottom right of the screen.
Don't worry about that.
Because what we need to do is we need to open up these three dots relating to slice center.
And you should get this little window that opens up showing your images with four different slidable
bars.
Now, what this is going to allow us to do is to define the different zones that are going to have different
aspect ratios.
So I'm going to slide this bottom one up.
So that way it's above these bottom corners.
Same thing with this top one I'm going to slide this one down.
And then I'm going to make sure that they're roughly the same size.
Or I want to make sure that they're the same size.
So the top is going to be 180 pixels from the top.
And then from the bottom.
For this image it's going to be 180 pixels.
And then for the sides we want to make sure we overlap our little icons on the side.
So it seems like 200 pixels is good enough.
And then for the left side we're going to do the exact same thing.
We're going to do 200 pixels from the left side.
Now we have nine different zones.
We have one in this corner, this corner, this corner and this corner.
We have them between the different corners.
And then we have one in the center.
Now each of these different zones has their own aspect ratios, which means if I were to go and resize
the screen, what's going to happen is that these zones between the corners are going to resize while
the corners are going to remain unaffected.
This will allow us to avoid that squish we just saw earlier.
So for example, if I resize on the y axis, what do you notice?
Our battery and our recording text did not squish, which is very cool.
Same thing goes with our corners.
You will notice that they remain the exact same size.
They're the exact same aspect ratio.
Now if I do the same thing on the x axis, if I scroll in that way, what will you notice?
Well, hey, they didn't squish along the x axis, which is very cool.
So this is the whole principle with nine slice design.
The purpose is for you to put an image into your image label.
Maybe it's an outline of an image with some cool design effects on the edges, and you want to make
sure that you keep the edges the same aspect ratio we'll have.
The borders between them change depending on the resolution and the scaling of the screen.
And that's all we do with this slice scale type.
We just open this up, adjust the lines to where we need it, and we're done.
So I hope you found this lecture helpful and I will see you in the next one.